window.addEventListener("load", () => {
    //获取时间放置元素
    //时
    const hour = document.querySelector(".hour>span");
    //分
    const minute = document.querySelector(".minute>span");
    //秒
    const second = document.querySelector(".second>span");
    const running = document.querySelector(".running");
    const paused = document.querySelector(".paused");
    const toast = document.querySelector(".toast");
    //定义函数 更新时间
    const getTime = () => {
        //获取当前的时间
        const nowTime = new Date();
        //获取当前时
        let hours = nowTime.getHours();
        //更新页面的时间小于10时前面加个0 
        hour.innerHTML = hours < 10 ? "0" + hours : hours;
        //获取当前分
        let minutes = nowTime.getMinutes();
        //更新页面的时间小于10时前面加个0 
        minute.innerHTML = minutes < 10 ? "0" + minutes : minutes;
        //获取当前秒
        let seconds = nowTime.getSeconds();
        //更新页面的时间小于10时前面加个0 
        second.innerHTML = seconds < 10 ? "0" + seconds : seconds;
    };
    getTime();
    //设置定时器 更新时间
    let timer = setInterval(() => {
        getTime();
    }, 1000)
    //定义一个变量 判断定时器是否需要开启
    let flag = false;

    let opacity = 0;

    //定义一个函数弹出提示框
    const showToast = () => {
        let show = setInterval(() => {
            opacity += 0.05;
            toast.style.opacity = opacity;

            if (opacity >= 1) {
                clearInterval(show);
                setTimeout(() => {
                    toast.style.opacity = 0;
                }, 1500)
            }
        }, 30);
    }

    //暂停功能
    paused.addEventListener("click", () => {
        //点击展厅清除定时器
        clearInterval(timer);
        //暂停之后更改定时器变量
        flag = true;
        //调用提示框
        toast.innerHTML = "时钟已经暂停~"
        showToast();
    });
    //开启功能
    running.addEventListener("click", () => {
        //判断是否需要开启定时器
        if (flag) {
            //点击开始重新开启一个定时器
            timer = setInterval(() => {
                getTime();
            }, 1000);
            //调用提示框
            toast.innerHTML = "时钟已经开启~"
            showToast();
            flag = false;
        }else {
            //调用提示框
            toast.innerHTML = "时钟已经是开启的了~"
            showToast();
        }
        

    })
})